<template>
  <div >
    <el-card class="box-card" id="Header">
      <div class="top-left-edition">
      <span style="color: #409EFF; font-weight: bold">
        <i class="el-icon-help" style="font-size: 40px; float: left;">&nbsp;基于深度学习的施工现场安全帽识别系统</i>
      </span>
      </div>

      <el-carousel :interval="4000" type="card" height="160px" style="margin-right: 35px;margin-bottom: -20px;border-radius: 15px;margin-top: -10px;">
        <el-carousel-item v-for="item in 5" :key="item" style="margin:0px;background-size:100% 100%;background-attachment:fixed;border-radius: 15px;">
          <h3 class="medium" style="text-align:right;">[{{ item }}]&nbsp;</h3>
        </el-carousel-item>
      </el-carousel>

      <div id="word">
        <!--      <h1><i class="el-icon-back" style="font-size: 40px; float: left; margin-top: -90px;">{{dateFormat(date)}}</i></h1>-->
        <h1><i class="el-icon-back" style="color: #409EFF;font-size: 30px; float: left; margin-top: -90px;" @click="pathto('')">&nbsp;回到首页</i></h1>
      </div>
    </el-card>


  </div>
</template>
<script>
export default {
  name: "Header",
  data() {
    return {
      activeIndex: "1",
      date:new Date(),
      // timer:new Date()
    };
  },
  created(){
    this.timer()
  },
  methods: {
    pathto(url){
      this.$router.push('/'+url)
    },
    dateFormat(time) {
          var date=new Date(time);
          var year=date.getFullYear();
          var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
          var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
          var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
          var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
          var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
          return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
      },
    timer(){              // 每隔1秒钟（1000毫秒），会执行一次箭头函数。
      let _this = this;
      this.timer = setInterval(() => {
        _this.date = new Date();
      }, 1000);
      },
    },
    mounted() {

       },
      beforeDestroy() {
       if (this.date) {
        clearInterval(this.date);
      }
      }
};
</script>
<style scoped>
#Header {
  /*background:#ffffffae;*/
  padding: 6px;
  border-radius: 5px;
  width: 95%;
  height: 160px;
  padding: 30px 0 20px 40px;
  margin: 0px auto 20px;
  /*background-color: #c6d9d9;*/
}

#word {
  margin-top: -25px;
}

h1 {
  color: #21b4b9ad;
  letter-spacing: 2px;
  font-size: 40px;
}

.top-left-edition span i {   /*top-left-edition类下的span标签中的i标签的样式*/
  float: left;
  margin-right: 10px;
}

i,
input,
label {
  vertical-align: middle;
}

i {
  border: 0;
  display: block;
  cursor: pointer;
}

.top-left-edition span {
  float: left;
  font-size: 16px;
  color: #999999;
  line-height: 24px;
  margin-right: 40px;
}

.el-carousel__item h3 {
    color: #ffffff;
    font-size: 18px;
    opacity: 0.75;
    line-height: 400px;
    margin: 0;
  }

/* 这里有个BUG，序列从3开始，暂未找到原因2023-3-10 */
.el-carousel__item:nth-child(3) {
  background-image: url('../../public/h3.jpg');
}
.el-carousel__item:nth-child(4) {
  background-image: url('../../public/h4.jpg');
}
.el-carousel__item:nth-child(5) {
  background-image: url('../../public/h6.jpg');
}
.el-carousel__item:nth-child(7) {
  background-image: url('../../public/h1.jpg');
}
.el-carousel__item:nth-child(6) {
  background-image: url('../../public/h2.jpg');
}
</style>


